import { Avatar, Card, Button } from 'antd';
import { DeleteOutlined, HeartOutlined, HeartTwoTone, StarOutlined } from '@ant-design/icons';
import { GetUserNameBySeriesId,thumbsUp, DeleteThumbsUpByData } from "../../api/Home/index";
import { useState, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import markdownToPlainText from '../MarkDownToText/MarkdownToText';
import ThumbsUp from '../../store/Home/index'
import LoginStore from '../../store/Login/index';

export const ArticlesCard = ({ ArticleItem, clickToArticle, clickToSeries }) => {

  const [count, setCount]=useState(0);

  const [user, setUser] = useState({});//作者信息

  const { list, addThumbsUp, removeThumbsUp } = ThumbsUp();//点赞设置

  const { userInfo } = LoginStore();//用户个人身份信息

  useEffect(() => {
    setCount(ArticleItem.thumbsUpCount);

    GetUserNameBySeriesId(ArticleItem.seriesId).then(({ data }) => {
      setUser(data.data);
    });
  }, []);

  return (
    <Card
      style={{
        marginTop: '20px',
        width: '100%',
        borderRadius: '10px'
      }}
    >
      <div>
        <div
          className='cardHeader'
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between'
          }}>
          <div style={{
            display: 'flex',
            alignItems: 'center'
          }}>
            <Avatar
              size={40}
              src={user.avatar}
            ></Avatar>
            <p
              style={{ marginLeft: '10px' }}
              onClick={clickToSeries}>{ArticleItem.title}</p>
          </div>
          <p>{user.username}-{ArticleItem.createTime.split('T')[0]}</p>
        </div>
        <p style={{ textAlign: 'left', marginTop: '20px' }} onClick={() => {
          clickToArticle();
        }}>
          <>
            {
              `${markdownToPlainText({ md: ArticleItem.content })
                .substring(0, 20)}......`
            }
          </>
        </p>

        <div style={{ display: 'flex', justifyContent: 'flex-start', marginTop: '20px' }}>
          <div className='cardFooter' style={{ display: 'flex', alignItems: 'center' }}>



            {/* <HeartTwoTone twoToneColor="#eb2f96" /> */}
            {
              list.some(item => item.article === ArticleItem.id && item.user === userInfo.id) ?
                <HeartTwoTone twoToneColor="#eb2f96" onClick={() => {
                  removeThumbsUp({article:ArticleItem.id,user:userInfo.id})
                  setCount((num)=>num-1);
                  DeleteThumbsUpByData(ArticleItem.id, userInfo.id)
                }} />
                :
                <HeartOutlined onClick={() => {
                  addThumbsUp({article:ArticleItem.id,user:userInfo.id});
                  setCount((num)=>num+1);
                  thumbsUp(ArticleItem.id, userInfo.id);
                }} />
            }

            {/* <HeartTwoTone twoToneColor="#eb2f96" /> */}
            <p style={{ marginLeft: '5px' }}>{count}</p>
          </div>
          <div className='cardFooter' style={{
            marginLeft: '20px', display: 'flex', alignItems: 'center'

          }}>
            <StarOutlined />

            <p style={{ marginLeft: '5px' }}>{ArticleItem.collectionCount}</p>
          </div>
        </div>
      </div>
    </Card>
  );

};

export const UserInfoCard = ({ avatar, username, office, email, createTime }) => {
  const navigate = useNavigate();
  return (
    <>
      <div style={{
        width: "70%",
        margin: '50px auto',
        height: "520px"
      }} className='border-2 rounded-xl border-neutral-400'>
        <Avatar style={{ marginTop: '20px' }} size={120} src={<img src={avatar} alt="avatar" />} />
        <h1 className='text-zinc-800 text-2xl'>{username}</h1>
        <div style={{ padding: '20px' }}>
          <div style={{ marginTop: '20px', width: '100%', textAlign: 'left' }}>
            <h2 className='font-bold text-lg'>职务</h2>
            <p className='text-lg text-neutral-500'>{office}</p>
          </div>
          <div style={{ marginTop: '20px', width: '100%', textAlign: 'left' }}>
            <h2 className='font-bold text-lg'>注册时间</h2>
            <p className='text-lg text-neutral-500'>
              {`${new Date(createTime).getFullYear()}年${new Date(createTime).getMonth() + 1}月${new Date(createTime).getDate()}日`}
            </p>
          </div>
          <div style={{ marginTop: '20px', width: '100%', textAlign: 'left' }}>
            <h2 className='font-bold text-lg'>邮箱</h2>
            <p className='text-lg text-neutral-500'>{email}</p>
          </div>
          <Button
            style={{
              width: '100%',
              height: '40px',
              marginTop: '20px'
            }}
            type="primary"
            danger
            onClick={() => {
              navigate('/login');
            }}
          >
            <DeleteOutlined /><p style={{ marginLeft: '5px' }}>退出登录</p>
          </Button>
        </div>
      </div>
    </>
  );
}